import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'


const Child = forwardRef((props, ref) => {

    const [count, setCount] = useState(100)

    // useImperativeHandle 该 hooks 可以让我们使用 ref 的时候，自定义
    // 要暴露出去的组件内容，可以是函数，可以是数据，也可以是组件
    useImperativeHandle(ref, () => {
        return {
            name: '张三',
            count,
            add() {
                setCount(count + 1)
            },
            aa: <p>你笑起来真好看</p>
        }
    })

    return (<>
        <h1> Child -- {count}</h1>
    </>)
})


export default function App() {

    const childRef = useRef()

    return (
        <div>

            <Child ref={childRef} />

            <button onClick={() => {

                console.log(childRef.current);

                // 我要点击加 1
                childRef.current.add()

            }}>获取 ref 的值</button>

        </div>
    )
}
